<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      :is-back="true"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
      id="nav-bar"
      title="登录"
    ></u-navbar>
    <image class="bg" src="/static/images/bg.png" mode="widthFix"> </image>
    <view class="content">
      <image class="logo" src="/static/images/logo.png"  mode="widthFix"> </image>
      <view class="label">网页由“汇数生活”提供，请确认一下授权信息</view>
      <view class="tip">·获取您的公开信息(昵称、头像等)</view>
      <button class="button-normal authBtn">授权一键登录</button>

      <button class="otherBtn" @click='otherWay'>其他登录方式</button>
    </view>

    <view class="agreement">
      <view class="agreement-in">
        <u-checkbox
          v-model="check"
          size="30rpx"
          active-color="#B7926E"
          label-disabled
          @change="checkboxChange"
        >
          <view class="agreement-text">
            已阅读并同意
            <text
              @click="
                navigateTo('/pages/agree/index?title=隐私保护协议&type=1')
              "
              >《用户服务与隐私保护协议》
            </text>
          </view>
        </u-checkbox>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {    check: false, };
  },
  onLoad() {
    const accountInfo = uni.getAccountInfoSync();
    this.version = accountInfo.miniProgram.version || '-';
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    checkboxChange(e) {
      this.check = e.value;
    },
    otherWay(){
      uni.navigateTo({
        url:'/pages/login/index',
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  padding: 40rpx;
  background-color: #f5f5f5;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
  }

  .agreement {
    position: absolute;
    left: 0;
    bottom: 60rpx;
    width: 100%;
    padding: 0 20rpx;
    z-index: 99;
    .agreement-in {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      text-align: center;
    }
    .agreement-text {
      font-size: 24rpx;
      font-weight: normal;
      color: #999393;
      line-height: 1;
      text {
        color: #B7926E;
      }
    }
  }
}

.content {
  position: relative;
  width: 100%;
  height: 100vh;
  padding-top: 260rpx;
  line-height: 1;
  text-align: center;
  background-color: transparent;
  z-index: 9;
  .logo {
    width: 150rpx;
    width: 150rpx;
  }
  .label {
    margin-top: 60rpx;
    width: 100%;
    font-family: PingFang SC, sans-serif;
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
  }

  .tip {
    margin-top: 24rpx;
    width: 100%;
    font-family: PingFang SC, sans-serif;
    font-weight: 500;
    font-size: 24rpx;
    color: #999999;
  }

  .authBtn {
    margin-top: 60rpx;
  }

  .otherBtn {
    margin-top: 20rpx;
    padding: 20rpx 0;
    font-family: PingFang SC, sans-serif;
    font-weight: 500;
    font-size: 28rpx;
    color: #b7926e;
    line-height: 1;
  }
}
</style>
